<template>
  <el-container>
    <el-header>
        <h3>添加学员</h3>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" :rules="rule" label-position="right" label-width="200px">
        <el-form-item label="姓名:" prop="name">
          <el-input type="text" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="telephone">
          <el-input type="text" v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="选择所属教练:" prop="coach_id">
          <el-select v-model.number="form.coach_id" placeholder="请选择教练">
            <el-option
              v-for="item in coachList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择学员类型:" prop="type">
          <el-select v-model.number="form.type" placeholder="请选择学员类型">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="iconfont iconicon_add" @click.prevent="add" :loading="loading">添加</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {getCoachList} from '@/api/coach'
  import {addStudent, checkStudentExist} from '@/api/student'
    export default {
        name: "add",
        data () {
            const checkTelephone = (rule, value, callback) => {
              var pattern = /^1\d{10}$/;
              if (!pattern.test(value)){
                  callback(new Error('手机号码不正确'));
              } else {
                  callback();
              }
            };
            const checkUser = (rule, value, callback) => {
                checkStudentExist({mobile: value}).then(response => {
                    callback();
                }).catch( err => {
                    callback(new Error(err));
                })
            };
            return {
                form: {
                    name: '',
                    telephone: '',
                    coach_id: '',
                    type: ''
                },
                rule: {
                    name: [
                        {required: true, message: '姓名为必填项', trigger: 'blur'},
                        {min: 2, message: '姓名最少2个字符', trigger: ['blur','change']}
                    ],
                    telephone: [
                        {required: true, message: '手机号码为必填项', trigger: 'blur'},
                        {validator: checkTelephone, message: '手机号码格式不正确'},
                        {validator: checkUser, message: '该手机号码已经存在'}
                    ],
                    coach_id: [
                        {required: true, message: '所属教练为必填项', trigger: ['change']},
                        {type: 'number', message: '请选择所属教练',trigger: ['change']}
                    ],
                    type: [
                        {required: true, message: '学员类型为必填项', trigger: ['change']},
                        {type: 'number', message: '请选择学员类型',trigger: ['change']}
                    ]
                },
                coachList: [],
                type: [
                    {id: 1, name: '普通学员'},
                    {id: 2, name: 'vip学员'}
                ],
                loading: false,
            };
        },
        methods: {
            //添加学员方法
            add() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;
                    var data = {
                        name: this.form.name,
                        mobile: this.form.telephone,
                        coach_id: this.form.coach_id,
                        type: this.form.type
                    };
                    addStudent(data).then(response => {
                      this.$message.success(response.msg);
                      this.loading = false;
                      this.$router.push({path: '/student/list'});
                    }).catch( err => {
                      this.loading = false;
                    })
                });
             }
        },
        mounted() {
            //获取当前分校的所有教练列表
            getCoachList().then(response => {
                this.coachList = response.data;
            }).catch(err => {

            })
        }
    }
</script>

<style scoped>
  .el-container {
    width: 70%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    margin: 10px auto;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .el-header {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-main .el-form .el-input {
    width: 60%;
  }
</style>
